<template>
    <el-dialog
        id="object-selector"
        title="提示"
        custom-class="act-dialog"
        :visible.sync="visible"
        :append-to-body="true"
        :before-close="onCloseDialog"
        width="40%" >
        <el-table
            :data="objects.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            width="100%" >
            <el-table-column
                label="对象标识"
                prop="id" 
                align="center" >
            </el-table-column>
            <el-table-column
                label="对象名称"
                prop="name" 
                align="center" >
            </el-table-column>
            <el-table-column
                align="center" >
                <template slot="header" slot-scope="scope">
                    <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入对象名称搜索"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        @click="selectObject(scope.$index, scope.row)" >
                        选择对象
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-content">
            <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentChange">
            </el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="cancel()">取 消</el-button>
        </span>
    </el-dialog>
</template>

<script>

export default {
    name: 'ObjectSelector',
    data() {
        return {
            dialogVisible: this.visible,
            objects: this.objects,
            search: '',
            total: this.objects.length,
            pagesize: 5,
            currentPage: 1,
        }
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        visible(newVal) {
            this.dialogVisible = newVal;
        }
    },
    mounted(){
    },
    methods: {
        onCloseDialog(done){
                done()
                this.$emit('objectSelected', {
                    oid: null,
                    status: false
                })
        },
        currentChange(currentPage) {
            this.currentPage = currentPage;
        },
        selectObject(index, row) {
            this.$emit('objectSelected', {
                oid: this.objects[index].id,
                status: false
            });
        },
        cancel() {
            this.$emit('objectSelected', {
                oid: null,
                status: false
            })
        }
    }
}

</script>


<style lang="less">
.act-dialog {
    background: rgba(13, 36, 136, 0.6);
    backdrop-filter: saturate(180%) blur(8px);
    border-radius: 8px;
    color: white;
    span {
        color: white
    }
}

.el-table {
    background-color: inherit;
    color: white
}

.el-table tr {
    background: none;
    color: white;
}

.el-table__header  {
    th.el-table__cell {
        background: none;
        color: white
    }
    th div {
        background: none;
        color: white;
    }
}

#object-selector .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(13, 36, 136, 1.0);
}

.pagination-content {
    text-align: center;
    padding-top: 1.875rem;
}
</style>

